<template>
    <div>
        <el-tabs type="border-card" class="main">
            <el-tab-pane label="目标任务">
                <br />
                <el-table :data="taskData" style="width: 100%" border>
                    <el-table-column prop="number" label="序号"> </el-table-column>
                    <el-table-column prop="name" label="任务标题"> </el-table-column>
                    <el-table-column prop="type" label="任务属性">
                        <template slot-scope="scope">
                            <div v-if="scope.row.type == 0">A</div>
                            <div v-else-if="scope.row.type == 1">B</div>
                            <div v-else-if="scope.row.type == 2">C</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="分配次级">
                        <template slot-scope="scope">
                            <div v-if="scope.row.level == 0">一级</div>
                            <div v-else-if="scope.row.level == 1">二级</div>
                            <div v-else-if="scope.row.level == 2">三级</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="isAssess" label="学校年度专项考核">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isAssess == 0">否</div>
                            <div v-else-if="scope.row.isAssess == 1">是</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="lookAt(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="布置工作">
                <br />
                <el-table :data="workData" style="width: 100%" border>
                    <el-table-column prop="number" label="序号"> </el-table-column>
                    <el-table-column prop="name" label="任务标题"> </el-table-column>
                    <el-table-column prop="managerId" label="负责人"> </el-table-column>
                    <el-table-column prop="helperIds" label="协助人"> </el-table-column>
                    <el-table-column prop="startTime" label="开始日期"> </el-table-column>
                    <el-table-column prop="endTime" label="完成日期"> </el-table-column>
                    <el-table-column prop="isAssess" label="属于学校专项考核工作">
                        <template slot-scope="scope">
                            <div v-if="scope.row.isAssess == 0">否</div>
                            <div v-else-if="scope.row.isAssess == 1">是</div>
                            <div v-else></div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope">
                            <el-popover title="工作要求" width="200" trigger="hover">
                                <div slot="">{{ scope.row.requirement }}</div>
                                <el-button size="mini" type="primary" slot="reference">查看</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="任务信息" :visible.sync="dialogVisible" width="70%">
            <div>
                <el-row>
                    <el-col :span="24"> <strong>任务标题: </strong> {{ taskInfos.name }} </el-col>
                </el-row>
                <br />
                <el-row>
                    <el-col :span="8"><strong> 年度:</strong> {{ targetYear }} </el-col>
                    <el-col :span="8">
                        <strong>任务属性:</strong>
                        <span v-if="taskInfos.type == 0">A类</span>
                        <span v-if="taskInfos.type == 1">B类</span>
                        <span v-if="taskInfos.type == 2">C类</span>
                    </el-col>
                    <el-col :span="8">
                        <strong>分配次级:</strong>
                        <span v-if="taskInfos.level == 0">一级</span>
                        <span v-if="taskInfos.level == 1">二级</span>
                        <span v-if="taskInfos.level == 2">三级</span>
                    </el-col>
                </el-row>
                <br />
                <el-row>
                    <el-col :span="8"> <strong>任务下发人:</strong> {{ taskInfos.allocUserId }} </el-col>
                    <el-col :span="8"> <strong>任务制定部门: </strong>{{ taskInfos.allocDeptId }} </el-col>
                </el-row>
                <br />
                <el-row>
                    <el-col :span="24">
                        <strong>是否为学校专项考核:</strong>
                        <span v-if="taskInfos.isAssess == null">--</span>
                        <span v-if="taskInfos.isAssess == 1">是</span>
                        <span v-if="taskInfos.isAssess == 0">否</span>
                    </el-col>
                </el-row>
                <br />
                <el-row>
                    <el-col :span="24"> <strong>任务要求: </strong>{{ taskInfos.requirement }} </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment';
import departmentApi from '../../../../api/department';
import workOfYearTargetApi from '../../../../api/workOfYearTargetApi';
import workApi from '../../../../api/work';
export default {
    props: {
        // 年份名字
        targetYear: String,
        // 年份id
        targetId: String,
        departmentIdC: String
    },
    data() {
        return {
            taskInfos: {},
            dialogVisible: false,
            collegeYearTestoptions: [],
            teacherOptions: [],
            departmentOptions: [],
            tempDeparts: [],
            tempTeachers: [],
            // 任务列表
            taskData: [],
            // 工作列表
            workData: [],
            addTaskDialogVisible: false,
            eidtTaskDialogVisible: false,
            addWorkDialogVisible: false,
            editWorkDialogVisible: false,
            editWorkInfoForm: {},
            addWorkInfoForm: {},
            addTaskInfoForm: {},
            editTaskInfoForm: {},
            collegeYearTestoptions: [
                {
                    value: '',
                    label: '--'
                },
                {
                    value: 1,
                    label: '是'
                },
                {
                    value: 0,
                    label: '否'
                }
            ],
            departmentId: '',
            allocDeptId: '',
            allocUserId: ''
        };
    },
    methods: {
        lookAt(content) {
            this.taskInfos = content
            console.log(this.taskInfos.allocDeptId );
            for(let i=0;i<this.$store.state.department.department.length;++i){
                if(this.taskInfos.allocDeptId == this.$store.state.department.department[i].id){
                    this.taskInfos.allocDeptId = this.$store.state.department.department[i].name
                }
            }
            for(let i=0; i<this.$store.state.teacher.teachers.length;++i){
                if(this.taskInfos.allocUserId == this.$store.state.teacher.teachers[i].id){
                    this.taskInfos.allocUserId = this.$store.state.teacher.teachers[i].name
                }
            }
            this.dialogVisible = true
        },
        // 获取所有部门下发的C类任务
        async getAllDepartC() {
            await workOfYearTargetApi.getDepartC(this.targetId, 2, this.departmentIdC).then((res) => {
                this.taskData = res.data;
                this.$forceUpdate();
            });
        },
        // 获取老师和部门
        getTeachersAndDepartments() {
            this.$store.dispatch('getTeachers').then((res) => {
                this.tempTeachers = this.$store.state.teacher.teachers;
                for (let i = 0; i < this.tempTeachers.length; ++i) {
                    this.teacherOptions[i] = {
                        value: this.tempTeachers[i].id,
                        label: this.tempTeachers[i].name
                    };
                }
            });
            this.$store.dispatch('getDepartment').then((res) => {
                this.tempDeparts = this.$store.state.department.department;
                for (let j = 0; j < this.tempDeparts.length; ++j) {
                    this.departmentOptions[j] = {
                        value: this.tempDeparts[j].id,
                        label: this.tempDeparts[j].name
                    };
                }
                // for (let n = 0; n < this.tempDeparts.length; ++n) {
                //     if (this.tempDeparts[n].name == this.taskInfos.acceptDeptId) {
                //         this.departmentId = this.tempDeparts[n].id;
                //     }
                // }
            });
            this.$forceUpdate();
        },

        // 获取当前部门下布置的工作
        async getWorkByTaskId() {
            await workApi.getWorkById(this.departmentId).then((res) => {
                this.workData = res.data;
                for (let i = 0; i < res.data.length; ++i) {
                    this.workData[i].startTime = moment(this.workData[i].startTime).format('YYYY-MM-DD');
                    this.workData[i].endTime = moment(this.workData[i].endTime).format('YYYY-MM-DD');
                }
            });
        },
        async getDepartmentName(id) {
            await departmentApi.getDepartmentById(id).then((res) => {
                this.addTaskInfoForm.allocDeptId = res.data.name;
                this.allocDeptId = res.data.name;
            });
        }
    },
    watch: {
        departmentIdC() {
            this.departmentId = this.$store.state.user.deptId;
            this.getAllDepartC();
            this.getTeachersAndDepartments();
            this.getWorkByTaskId();
            // 添加人
            this.addTaskInfoForm.allocUserId = this.$store.state.user.name;
            this.allocUserId = this.$store.state.user.name;
            // 添加部门
            this.getDepartmentName(this.$store.state.user.deptId);
        }
    }
};
</script>

<style scoped>
.main {
    color: #606266;
}
</style>